<template>
  <div class="background animate__animated animate__fadeIn">
    <div class="container">
      <div class="nav">
        <ul>
          <li><router-link to="/fosterage/myFosterage" active-class="active-class">我的寄养</router-link></li>
          <li><router-link to="/fosterage/publicFosterage" active-class="active-class">发布寄养</router-link></li>
        </ul>
      </div>
      <div class="content">
          <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Fosterage",
};
</script>

<style scoped>
.background {
  width: 100%;
  height: 920px;
  padding-top: 5px;
  /* background-color: rgb(238, 238, 238); */
}

.container {
  width: 1000px;
  height: 900px;
  margin: 0 auto;
  /* background-color: antiquewhite; */
}

.nav {
  width: 145px;
  height: 900px;
  margin-right: 5px;
  float: left;
  color: rgb(255, 255, 255);
  background-color: rgb(161, 161, 161);
  /* background: #141e30; 
  background: -webkit-linear-gradient(to right,#141e30,#243b55);
  background: linear-gradient(to right, #141e30, #243b55); */
}

.content {
  width: 850px;
  height: 900px;
  float: left;
  color: black;
  /* background: linear-gradient(to right, #7c848d, #bdc3c7); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background-color: rgb(193, 193, 193);
}

.nav ul {
  width: 100%;
  padding-top: 30px;
}

.nav ul li {
  width: 100%;
  height: 50px;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  transition: .2s;
}

.nav ul li:hover {
  background: #fe8c00;  /*fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.active-class {
  background: #fe8c00;  /*fallback for old browsers */
  background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.nav ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
}
</style>